{extend name="iframe" /}
{block name="css"}
    <style type="text/css">
        .editForm{
            margin-top: 20px;
        }
        .submit_btn{
            display: none;
        }
        @media (min-width: 768px){
            .bootstrap-switch{
                margin-top: 7px;
            }
        }
    </style>
{/block}

{block name="content"}
    <div class="container-fluid content-wrapper-box">
        <div class="content-wrapper">
            <form class="form-horizontal editForm" action="" method="post" enctype="multipart/form-data">
                 <div class="form-group">
                    <label class="control-label col-xs-2">
                        <em class="must_fill">*</em>用户名&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <input type="text" value="{$data.username}" name="username" class="form-control" placeholder="登录用户名" required data-msg="用户名不能为空">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2">
                        <em class="must_fill">*</em>昵称&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <input type="text" value="{$data.nickname}" name="nickname" class="form-control" placeholder="昵称姓名" required data-msg="昵称不能为空">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2">
                        登陆密码&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <input type="text" value="" name="password" class="form-control" placeholder="留空则不修改密码">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2">
                        分机号&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <!--required data-msg="分机号不能为空"-->
                        <input type="text" value="{$data.extennum}" name="extennum" class="form-control" placeholder="绑定分机号" >
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2">
                        头像&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <input type="text" class="form-control" name="head_image"  value="{$data.head_image}" readonly  unselectable="on">
                    </div>
                    <div class="col-xs-2">
                        <button type="button" class="btn btn-primary spl_file_upload_btn">
                            上传
                        </button>
                        <input class="fileUpload form-control" type="file" name="file" style="display: none;"  data-type="image">
                    </div>
                    <div class="col-xs-12">
                        <div class="row">
                            <div class="col-xs-2"></div>
                            <div class="col-xs-8 spl_callback">
                                {if $data.head_image neq ''}
                                    {if 'image' == 'file'}
                                        <div class="col-xs-8">
                                            <button type="button" class="btn btn-danger spl-delete-file" data-src="{$data.head_image}">删除</button>
                                        </div>
                                    {elseif 'image' === 'image'}
                                        <div class="col-xs-3">
                                            <img src="{$data.head_image}">
                                            <button type="button" class="btn btn-danger spl-delete-file" data-src="{$data.head_image}">删除</button>
                                        </div>
                                    {/if}
                                {/if}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2">
                        <em class="must_fill">*</em>角色组合&nbsp;
                    </label>
                    <div class="col-xs-8" style="padding-top: 7px;">
                        {foreach name="roles" item="role"}
                        <label style="text-align: right;margin-left: 8px;">
                            <input type="checkbox" class="chk_role" value="{$role.id}" name="role_ids[]" {php}if(in_array($role['id'],$data['role_ids']))echo 'checked="true"';{/php}  required data-msg="角色不能为空" >
                            {$role.role_name}
                        </label>
                        {/foreach}
                    </div>
                </div>
                <div class="form-group {php}if( !in_array('4', $data['role_ids']) ) echo 'hide';{/php}" id="div_leader">
                    <label class="control-label col-xs-2">
                        关联组长&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <select class="form-control" name="leader" id="leader"  required data-msg="请选为客户服选择组长">
                            <option value="0">请选择</option>
                            {foreach name="leaders" item="leader"}
                            <option value="{$leader['id']}" {if $leader.id eq $data.leader}selected{/if} >{$leader['nickname']}</option>
                            {/foreach}
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2">
                        启用状态&nbsp;
                    </label>
                    <div class="col-xs-8">
                        <input type="checkbox" value="{$data.status}" name="status" class="switch" checked>
                    </div>
                </div>

                <input type="hidden" name="id" value="{$data.id}">
                <input class="btn btn-primary submit_btn" onclick="submitFrom()" type="submit">
                <input class="btn btn-default reset_btn" type="hidden" onclick="resetForm()">
            </form>
        </div>
    </div>
{/block}

{block name="script"}
    <script type="text/javascript">
        $(function () {
            //初始化开关选项
            switchInit();
            //初始化日期控件
            dateTimePickerInit();
            //初始化文件控件
            fileInit();


            $.validator.setDefaults({
                errorPlacement: function (error, element) {
                    if (element.is(":radio") || element.is(":checkbox")) {
                        error.appendTo(element.parent().parent());
                    } else {
                        error.appendTo(element.parent());
                    }
                }
            });

            //roles角色选择事件
            $('input.chk_role').on('click', function () {
                var $obj = $(this);
                if($obj.val()==4 /*客服角色*/){
                    if( $obj.is(':checked') )
                        $('#div_leader').removeClass('hide');
                    else{
                        $('#div_leader').addClass('hide');
                        $('#leader').val('0');
                    }
                }
            });

        });
        //初始化开关选项
        function  switchInit() {
            var switch_obj = $('.switch'),i=0;
            switch_obj.bootstrapSwitch({
                onText:"<i class='fa fa-check'></i>",
                offText:"<i class='fa fa-close'></i>",
                onColor:"success",
                offColor:"danger",
                onSwitchChange:function(event,state){
                    $(this).prop("checked",true);
                    if(state===true){
                        $(this).val(1);
                    }else{
                        $(this).val(2);
                    }
                }
            });
            switch_obj.bootstrapSwitch('size','mini');
            for(;i < switch_obj.length;i++){
                if(switch_obj.eq(i).val()==='1'){
                    switch_obj.eq(i).bootstrapSwitch('state',true);
                }else{
                    switch_obj.eq(i).bootstrapSwitch('state',false);
                }
            }
        }
        //初始化日期控件
        function dateTimePickerInit() {
            $('.dateTimePicker').datetimepicker({
                format: 'YYYY-MM-DD HH:mm:ss',
                locale: moment.locale('zh-cn')
            });
        }
        //初始化文件控件
        function fileInit() {
            //单文件上传
            $('.spl_file_upload_btn').on('click',function () {
                $(this).next('input').click();
            });
            $('.fileUpload').fileupload({
                dataType: 'json',
                add: function (e, data) {
                    var data_type = $(this).attr('data-type');
                    $(this).fileupload('option', 'url', "{:url('AdminUser/fileUpload')}?data_type="+data_type);
                    data.submit();
                },
                done: function (e, data) {
                    var response = data.result;
                    if(response.code === 0){
                        var spl_callback_html = '';
                        switch($(this).attr('data-type')){
                            case 'file':
                                $(this).parent('div').prev('div').find('input').val(response.data);
                                spl_callback_html = '<div class=col-xs-8><button type="button" class="btn btn-danger spl-delete-file" data-src="'+
                                    response.data +'">删除</button></div>';
                                break;
                            case 'image':
                                $(this).parent('div').prev('div').find('input').val(response.data);
                                spl_callback_html = '<div class="col-xs-3">' +
                                    '<img src="'+ response.data +'">' +
                                    '<button type="button" class="btn btn-danger spl-delete-file" data-src="'+
                                    response.data +'">删除</button>' +
                                    '</div>';
                                break;
                        }
                        $(this).parents('.form-group').find('.spl_callback').html(spl_callback_html);
                        $(this).parent('div').prev('div').find('input').blur();
                        toastr.success(response.msg);
                    }else{
                        toastr.error(response.msg);
                    }
                }
            });
            //单图预览
            $('body').on('click','.spl_callback img',function () {
                parent.window.open($(this).attr('src'));
            });
            //单文件删除
            $('body').on('click','.spl-delete-file',function () {
                var file_url = $(this).attr('data-src');
                var obj = $(this);
                $.ajax({
                    url:"{:url('AdminUser/fileDelete')}",
                    type:'post',
                    dataType:'json',
                    data:{file_url:file_url},
                    success:function (response) {
                        if(response.code === 0){
                            //清空容器
                            obj.parents('.form-group').find('input[type="text"]').val('');
                            obj.parents('.spl_callback').html('');
                            toastr.success(response.msg);
                        }else{
                            toastr.error(response.msg);
                        }
                    }
                });
            });
        }


        //提交表单
        function submitFrom() {
            var  frameIndex= parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            //表单验证
            $(".editForm").validate({
                keydown:true,
                submitHandler: function(form) {
                    $(form).ajaxSubmit({
                        dataType:'json',
                        success:function (response) {
                            if(response.code === 0){
                                parent.toastr.success(response.msg);
                                parent.layer.close(frameIndex);
                            }else{
                                parent.toastr.error(response.msg);
                            }
                            //刷新数据表格
                            parent.searchForm();
                        }
                    });
                }
            })
        }
    </script>
{/block}
